<template>
  <div class="max-w-6xl mx-auto p-6">
    <!-- Tab 导航 -->
    <TabNavigation 
      :tabs="tabs" 
      :activeTab="activeTab" 
      @update:activeTab="handleTabClick" 
    />

    <!-- Tab 内容 -->
    <MaterialsTab 
      v-if="activeTab === 'materials'" 
      :chapterPath="'/chap01'"
      :showChapterHighlights="true"
    />
    <VideosTab 
      v-if="activeTab === 'videos'" 
      :title="'第一章 - 前端技术概述'"
      :mainVideos="chapter1MainVideos"
      :videoList="chapter1VideoList"
    />
    <AssignmentsTab v-if="activeTab === 'assignments'" />
    <ExtensionsTab 
       v-if="activeTab === 'extensions'" 
       :materials="chapter1ExtensionMaterials"
       :recommendedResources="chapter1RecommendedResources"
       title="第1章 - 前端技术概述扩展资源"
     />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import TabNavigation from '@/components/TabNavigation.vue'
import MaterialsTab from '@/components/MaterialsTab.vue'
import VideosTab from '@/components/VideosTab.vue'
import AssignmentsTab from '@/components/AssignmentsTab.vue'
import ExtensionsTab from '@/components/ExtensionsTab.vue'
import { useStudyTracker } from '@/composables/useStudyTracker'

// 启用学习追踪
const {
  trackVideoWatch,
  trackMaterialClick,
  trackExerciseComplete
} = useStudyTracker()

// Tab 配置
const tabs = ref([
  { id: 'materials', name: '学习材料' },
  { id: 'videos', name: '学习视频' },
  { id: 'assignments', name: '作业/任务' },
  { id: 'extensions', name: '扩展材料' }
])

// 当前激活的 Tab
const activeTab = ref('materials')

// Tab 切换处理
const handleTabClick = (tabId) => {
  activeTab.value = tabId
}

// 第1章视频数据
const chapter1MainVideos = ref([
  {
    id: 'chap1-main1',
    title: '前端技术的十八年风雨',
    url: 'https://1304796331.vod-qcloud.com/c881d227vodcq1304796331/547e45075145403691651426767/hwdN5D5yvHAA.mp4',
    description: '前端技术发展历程回顾'
  },
  {
    id: 'chap1-main2',
    title: '前端技术发展史',
    url: 'https://vjs.zencdn.net/v/oceans.mp4',
    description: '前端技术发展历程详解'
  }
])

const chapter1VideoList = ref([
  {
    id: 1,
    title: '前端开发环境搭建详解',
    description: '详细介绍如何搭建现代前端开发环境，包括Node.js、npm、VS Code等工具的安装和配置。',
    duration: '25:30',
    thumbnail: '/images/video-thumbnails/env-setup.jpg',
    url: 'https://example.com/video/env-setup',
    category: 'tutorial',
    difficulty: '初级',
    tags: ['环境搭建', 'Node.js', 'VS Code'],
    publishDate: '2024-01-15',
    views: 1250,
    likes: 89
  },
  {
    id: 2,
    title: 'Git版本控制基础',
    description: 'Git的基本概念和常用命令，包括仓库初始化、提交、分支管理等核心功能。',
    duration: '18:45',
    thumbnail: '/images/video-thumbnails/git-basics.jpg',
    url: 'https://example.com/video/git-basics',
    category: 'tutorial',
    difficulty: '初级',
    tags: ['Git', '版本控制', '基础'],
    publishDate: '2024-01-20',
    views: 980,
    likes: 76
  }
])

// 第1章扩展材料
const chapter1ExtensionMaterials = ref([
  {
    id: 1,
    title: 'Frontend Evolution Timeline',
    description: '前端技术发展时间线项目，以可视化方式展示前端技术的演进历程和重要里程碑。',
    url: 'https://github.com/ManzDev/frontend-evolution',
    type: 'github',
    category: 'community',
    tags: ['前端历史', '可视化', 'GitHub项目'],
    author: 'ManzDev',
    publishDate: '2023-10-01',
    readTime: '30分钟',
    difficulty: '中级',
    isFavorite: false
  },
  {
    id: 2,
    title: '一文读懂前端技术演进：盘点Web前端20年的技术变迁史',
    description: '深度回顾前端技术20年发展历程，从洪荒时代到现代框架时代，详细分析每个阶段的技术特点和发展驱动力。',
    url: 'https://cloud.tencent.com/developer/article/1492656',
    type: 'article',
    category: 'article',
    tags: ['前端历史', '技术演进', '20年发展', '技术变迁'],
    author: '司徒正美',
    publishDate: '2023-09-15',
    readTime: '25分钟',
    difficulty: '中级',
    isFavorite: false
  },
  {
    id: 3,
    title: 'Vue.js 官方文档',
    description: 'Vue.js 框架的官方中文文档，提供完整的 API 参考和最佳实践指南。',
    url: 'https://cn.vuejs.org/',
    type: 'reference',
    category: 'reference',
    tags: ['Vue.js', '框架', '官方文档'],
    author: 'Vue.js Team',
    publishDate: '2024-01-15',
    readTime: '长期参考',
    difficulty: '中级',
    isFavorite: false
  }
])

// 第1章推荐资源
const chapter1RecommendedResources = ref([
  {
    id: 1,
    title: 'Can I Use',
    description: '查询浏览器对各种Web技术的支持情况',
    url: 'https://caniuse.com/'
  },
  {
    id: 2,
    title: 'CSS-Tricks',
    description: '优秀的CSS技巧和前端开发资源网站',
    url: 'https://css-tricks.com/'
  },
  {
    id: 3,
    title: 'JavaScript.info',
    description: '现代JavaScript教程，从基础到高级',
    url: 'https://javascript.info/'
  },
  {
    id: 4,
    title: 'Frontend Mentor',
    description: '前端挑战项目，提升实战技能',
    url: 'https://www.frontendmentor.io/'
  },
  {
    id: 5,
    title: 'Awesome Frontend',
    description: '精选的前端开发资源列表',
    url: 'https://github.com/sindresorhus/awesome'
  },
  {
    id: 6,
    title: 'Web.dev',
    description: 'Google的Web开发最佳实践指南',
    url: 'https://web.dev/'
  }
])
</script>

<style scoped>
/* 组件特定样式可以在这里添加 */
</style>